The Best Like Button™️

Wow your users!

People love to like things. And now they'll love to like even more things with The Best Like Button™️ on The Internet.

Recommended: add text next to the button however you like to display e.g. number of likes.

Bonus! See this button in action on the Nordcraft package pages.

Demo

Components

  • best-like-button

    Just wow.

    Attributes

    Configure the following attributes for each instance of the best-like-button component.

    border_colorA color as a CSS color, hex code, or RGB value to style the border around the heart icon.
    border_radiusA number that specifies the border radius of the button in pixels (e.g. 8).
    colorA color as a CSS color, hex code, or RGB value to style the fill of the heart icon.
    focus_outline_colorA color as a CSS color, hex code, or RGB value to determine the color of the button focus outline.
    focus_outline_widthA number that specifies the width of the focus outline in pixels (e.g. 6).
    item_nameProvide the name of the item to like/unlike, which generates an accessible button label.
    likedSet to true to fill the heart to indicate a given like, set false to unset the fill. Set liked to true or false based on API responses on load. Clicking the heart automatically toggles the liked variable inside so you don't need to wait for API responses.
    number_of_heartsDefine how many hearts you would like to see explode out of the main heart. Really big numbers don't work that well. The ideal number is 7.
    sizeA number that specifies the height and width of the heart icon in pixels (e.g. 44).

Events

  • click-best-like-button

    Use this event on the component to process logic when The Best Like Button™️ is clicked.

Internal variables

  • clicked: true/false

    default: false

    Controls when the animations run. The variable is set to true when the button is clicked, and set to false when the animation ends.

  • liked: true/false

    default: set by the liked attribute

    Setting liked to true fills the heart. This variable can be set based on API responses to fill or empty the heart accordingly on page load. Clicking the button automatically toggles the liked boolean.